<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="/css/videojs/video-js.css">
	<!-- If you'd like to support IE8 本地调试失败：ie8不支持本地视频播放,火狐和谷歌可以-->
	<script src="/js/videojs/videojs-ie8.js"></script>
	<!--下面的包不支持ie8-->
	<script src="/js/videojs/video.js"></script>
	<script src="/js/jquery-3.2.1.min.js"></script>
	<!--<script src="/js/videojs/videojs-flash.js"></script>-->
	<style>
		.user-name {
			display: none;
			position: absolute;
			top: 5px;
			right: 10px;
			z-index: 10;
			min-width: 150px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			color: red;
			border: 1px solid red;
		}
		#example_video_1 {
			width: 100%;
			height: 500px;
		}
		.video-js .vjs-big-play-button{
			font-size: 2.5em;
			line-height: 2.3em;
			height: 2.5em;
			width: 2.5em;
			-webkit-border-radius: 2.5em;
			-moz-border-radius: 2.5em;
			border-radius: 2.5em;
			background-color: #73859f;
			background-color: rgba(115,133,159,.5);
			border-width: 0.15em;
			margin-top: -1.25em;
			margin-left: -1.75em;
		}
		/* 中间的播放箭头 */
		.vjs-big-play-button .vjs-icon-placeholder {
			font-size: 1.63em;
		}
		/* 加载圆圈 */
		.vjs-loading-spinner {
			font-size: 2.5em;
			width: 2em;
			height: 2em;
			border-radius: 1em;
			margin-top: -1em;
			margin-left: -1.5em;
		}
		/*视频剩余倒计时改为播放时长*/
		.video-js .vjs-time-control{display:block;}
		.video-js .vjs-remaining-time{display: none;}
	</style>
</head>
<body>

	<video id="example_video_1" class="video-js vjs-big-play-centered" controls preload="none" width="640" height="264" data-setup='{}'>
    	<source th:src="${videoName}" type="video/mp4">
		抱歉，你的浏览器不支持video标签。。
  	</video>
	<input id="imgName" type="hidden" th:value="${imgName}">
	<script>
		var img = $("#imgName").val();
		var player=videojs('#example_video_1',{
			techOrder: ["html5","flash"],//
			autoplay: false,
			preload: 'auto',
			poster: img,
			flash: {
				swf: '/swf/video-js.swf'
			}
		},function(){

		});
	</script>
</body>
</html>